<template>
	<view class="card_transfer_warp">
		<Header leftPathType="switchTab" leftPath="/pages/mine/mine" :title="$t('mine.card.transfer.record.title')"/>
		<view class="card_transfer_content _content_consumption_record">
			<scroll-view scroll-y="true" @scrolltolower="loadMore" :style="{'height':'calc(100vh - 128px)'}">
				<view class="_content_consumption_record_item" v-for="item in recordList" :key="item.id" v-if="recordList && recordList.length !==0">
					<view class="">
						<view class="_record_item_title" style="display: flex;">
							<view>
								{{$t("mine.card.transfer.record.card.number")}}：{{cardNumberProcessing(item.toCardNo)}}
							</view>
							<view style="margin-left: 10rpx;">
								<up-image src="/static/comm/copy.png" width="14" height="14" bgColor="#f1f6ff00" @click="copyData(item.toCardNo)"></up-image>
							</view>
						</view>
						<view class="_record_item_value">{{formatDate(item.ctdate)}}</view>
					</view>
					<view> 
						<view class="_record_item_title _record_item_value_right">
							<text>{{item.inAmount}}</text>
							<text>USDT</text>
							<text>（{{getValue(CARD_TRANSFER_STATUS,item.status)}}）</text>
						</view>
						<view class="_record_item_value _record_item_value_right">
							<text>{{$t('common.fee')}}{{item.feeAmount}}USDT</text>
						</view>
					</view>
				</view>
				<view v-else class="not_data_warp">
					<up-image src="/static/comm/not_data.png" width="200" height="90" bgColor="#f1f6ff00"></up-image>
					<view class="not_data_msg_warp">{{$t('details.historical.details.no')}}</view>
				</view>
				<view v-if="loading" style="text-align: center;">{{$t("common.loading")}}</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header_comm3.vue';
	import { formatDate,cardNumberProcessing,copyData } from '@/utils/index.js';
	import { getCardTransferList } from '@/api/finance.js';
	import { CARD_TRANSFER_STATUS,getValue } from '@/utils/enumUtils.js';
	
	export default {
		components:{Header},
		computed: {
		    getValue() {
				return getValue;
		    },
		    CARD_TRANSFER_STATUS() {
				return CARD_TRANSFER_STATUS;
		    },
		},
		data() {
			return {
				recordList:[],
				loading:false,
				form:{
					page:1,
					pageSize:10,
				}
			};
		},
		mounted() {
			this.loadData();
		},
		methods: {
			cardNumberProcessing,
			formatDate,
			copyData,
			// 当滚动到底部时触发的方法
			loadMore() {
				this.loadData(); // 加载更多数据
			},
			// 加载数据的方法
			async loadData() {
			  if (this.loading) return; // 如果正在加载，则不重复加载
			 
			  this.loading = true; // 设置加载状态为true
			  try {
				const newData = await this.fetchData();
				if(newData.entitys && newData.entitys.length !==0){
					this.recordList = [...this.recordList, ...newData.entitys]; // 将新数据添加到列表中
					this.form.page++; 
				}
			  } catch (error) {
				console.error('加载数据失败:', error);
			  } finally {
				this.loading = false; // 设置加载状态为false
			  }
			},
			// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
			async fetchData() {
				const params = this.form;
				const resp = await getCardTransferList(params);
				console.log("resprespresp",resp);
				if(resp && resp.bizcode === 100 && resp.data){
					return resp.data;
				}else{
					return [];
				}
			},
		}
	}
</script>

<style lang="scss">
.card_transfer_warp{
	height: calc(100vh - 0rpx);
	overflow: hidden;
	background: #000000;
	.card_transfer_content{
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 30rpx;
		height: calc(100vh - 234rpx);
		overflow: hidden;
		margin-top: 10rpx;
	}
}
</style>
